<template>
  <a-form-item
    :label="field.label"
    :name="field.field"
    :rules="field.rules"
    :help="field.help"
    :extra="field.description"
  >
    <a-auto-complete
      v-model:value="autoCompleteValue"
      :placeholder="field.placeholder"
      :disabled="disabled || field.disabled"
      :options="field.options || []"
      @change="handleChange"
      @select="handleSelect"
      @blur="handleBlur"
      @focus="handleFocus"
      @search="handleSearch"
      v-bind="field.props"
    />
  </a-form-item>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  field: {
    type: Object,
    required: true
  },
  model: {
    type: Object,
    required: true
  },
  value: {
    type: [String, Number],
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  },
  readonly: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:value', 'change', 'select', 'blur', 'focus', 'search'])

// 计算属性：双向绑定值
const autoCompleteValue = computed({
  get() {
    return props.value || props.field.defaultValue || ''
  },
  set(val) {
    emit('update:value', val)
  }
})

// 处理值变化
const handleChange = (value) => {
  emit('change', value)
  emit('update:value', value)
}

// 处理选择
const handleSelect = (value, option) => {
  emit('select', value, option)
  emit('update:value', value)
}

// 处理搜索
const handleSearch = (value) => {
  emit('search', value)
}

// 处理失焦
const handleBlur = () => {
  emit('blur', autoCompleteValue.value)
}

// 处理聚焦
const handleFocus = () => {
  emit('focus', autoCompleteValue.value)
}
</script> 